<template>
  <div class='container'>
    <el-dialog :title="titleInfo.text+titleInfo.pageTitle" @close='close' :visible.sync="showAddDialog" width="40%">
      <el-form :model="formBase" ref="articleFormRef" :rules="articleFormRules" label-width="80px" size="small">
        <el-form-item label="文章标题" prop='title'>
          <el-input v-model="formBase.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody" style='height:250px;'>
          <quill-editor style='height:200px;' :options="editorOption" v-model="formBase.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item style='margin: 10px 0' label="视频地址" prop="videoURL">
          <el-input v-model="formBase.videoURL" placeholder='请输入视频地址'></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: right;">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { add, update } from '../../api/hmmm/articles'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  components: {
    quillEditor
  },
  data: function () {
    // const date = {
    //   title: this.formBase.title,
    //   articleBody: this.formBase.articleBody,
    //   videoURL: this.formBase.video
    // }
    // console.log(date)
    // this.articleForm = date
    // console.log(this.articleForm)
    return {
      // 富文本工具栏配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote'], // 引用，
            // [{ header: 1 }, { header: 2 }], // 几级标题
            ['code-block', 'image', 'link'] // 代码块 ,图片，连接
            // [{ script: 'sub' }, { script: 'super' }], // 下角标，上角标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文字输入方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 颜色选择
            // [{ font: [] }], // 字体
            // [{ align: [] }], // 居中
            // ['clean'] // 清除样式
          ]
        }
      },
      // 表单规则
      articleFormRules: {
        title: [
          { required: true, message: '请输入文章的标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章的内容', trigger: 'blur' }
        ]
      },
      showAddDialog: false
      // // 文章表单
      // articleForm: {
      //   // 标题
      //   title: '',
      //   // 文章正文
      //   articleBody: '',
      //   // 视频地址
      //   videoURL: ''
      // }
    }
  },
  methods: {
    close () {
      this.$refs.articleFormRef.resetFields()
    },
    // 提交表单
    onSubmit () {
      this.$refs.articleFormRef.validate(async bool => {
        if (!bool) return this.$message.error('表单验证失败')
        if (this.formBase.id) {
          await update(this.formBase)
        } else {
          const data = await add(this.formBase)
          console.log(data)
          if (data.status !== 200) return this.$message.error('添加失败')
        }
        this.showAddDialog = false
        this.$parent.getArticlesList()
      })
    },
    // 显示对话框
    handleShow () {
      this.showAddDialog = true
    }
  }
}
</script>

<style scoped lang='less'>
.a {
  margin-top: 10px;
  float: right;
  text-align: right;
}
</style>
